<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>超长文本</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/@antv/g6@4.8.22/dist/g6.min.js"></script>
</head>

<body>
    <!-- 页面内容区域 -->
    <div id="container" style="width: 100vw;height: 100vh;"></div>
</body>
<script>

    const data = {
        nodes: [
            { id: 'node1', x: 150, y: 250 },
            { id: 'node2', x: 350, y: 250 },
        ],
        edges: [
            {
                source: 'node1',
                target: 'node2',
            },
        ],
    };

    let shift = true;

    const graphDiv = document.getElementById('container');

    const switchDiv = document.createElement('div');
    switchDiv.innerHTML = `Press \'shift\' to select multiple nodes. Click Here to switch trigger to key \'alt\'
  <br /> 按住 'shift' 可多选节点。点击「这里」将 trigger 切换为 'alt'`;
    graphDiv.appendChild(switchDiv);

    const width = container.scrollWidth;
    const height = (container.scrollHeight || 500) - 30;
    const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        fitCenter: true,
        modes: {
            default: ['click-select', 'drag-node'],
            altSelect: [
                {
                    type: 'click-select',
                    trigger: 'alt',
                },
                'drag-node',
            ],
        },
        /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable. you can extend or custom it by the following lines */
        /* 不同状态下节点和边的样式，G6 提供以下状态名的默认样式：active, inactive, selected, highlight, disable。可以通过如下方式修改或者扩展全局状态样式*/
        // nodeStateStyles: {
        //   selected: {
        //     stroke: '#f00',
        //     lineWidth: 3
        //   }
        // },
        // edgeStateStyles: {
        //   selected: {
        //     lineWidth: 3,
        //     stroke: '#f00'
        //   }
        // }
    });

    graph.on('node:mouseenter', (e) => {
        graph.setItemState(e.item, 'active', true);
    });

    graph.on('node:mouseleave', (e) => {
        graph.setItemState(e.item, 'active', false);
    });

    graph.on('nodeselectchange', (e) => {
        console.log(e.selectedItems, e.select);
    });

    switchDiv.addEventListener('click', (e) => {
        shift = !shift;
        if (shift) {
            graph.setMode('default');
            switchDiv.innerHTML = `Press \'shift\' to select multiple nodes. Click Here to switch trigger to key \'alt\'
      <br /> 按住 'shift' 可多选节点。点击「这里」将 trigger 切换为 'alt'`;
        } else {
            graph.setMode('altSelect');
            switchDiv.innerHTML = `Press \'alt\' to select multiple nodes. Click Here to switch trigger to key \'shift\'
      <br /> 按住 'alt' 可多选节点。点击「这里」将 trigger 切换为 'shift'`;
        }
    });

    graph.data(data);
    graph.render();

    if (typeof window !== 'undefined')
        window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight - 30);
        };
</script>

</html>